<template>
  <div>
    <div class="title flex mgt">
      <div class="flex1">附加信息</div>
      <img src="../../assets/home/add.png" alt="" class="add" @click="addInfo">
    </div>
    <div v-for="(item, index) in attach_info" :key="index">
      <div v-if="editingIndex === index" class="flex mainlist-hovers">
        <el-form :model="item" :rules="rules" :ref="(el) => { if (el) formRefs[index] = el }" label-width="100px"
          label-position="top">
          <el-form-item label="主题" prop="topic">
            <el-input v-model="item.topic"></el-input>
          </el-form-item>
          <el-form-item label="主题描述" prop="desc">
            <el-input type="textarea" v-model="item.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancel(index)">取消</el-button>
            <el-button type="primary" @click="save(index)">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="main-jinglist mainlist-hover" @mouseenter="showTooltip(index)" @mouseleave="hideTooltip">
        <div class="left-miaoshu">
          <div>主题:</div>
          <p>{{ item.topic }}</p>
          <div v-if="isTooltipVisible && tooltipIndex === index" class="flex bianji">
            <div class="flex" @click="edit(index)">
              <img src="../../assets/home/bianji.png" alt="" class="del">
              编辑
            </div>
            <div class="flex delnum" @click="remove(index)">
              <img src="../../assets/home/del.png" alt="" class="del">
              删除
            </div>
          </div>
        </div>
        <div class="left-miaoshu">
          <div>主题描述:</div>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';

const formRefs = ref([]);
const props = defineProps({
  attach_info: {
    type: Array,
    default: () => []  // 添加默认值
  }
});
const { attach_info } = toRefs(props);

const emit = defineEmits(['save']);

const editingIndex = ref(-1);
const isTooltipVisible = ref(false);
const tooltipIndex = ref(-1);

// 表单校验规则
const rules = {
  topic: [
    { required: true, message: '请输入主题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  desc: [
    { required: true, message: '请输入主题描述', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
};

// 新增附加信息
const addInfo = () => {
  const newInfo = {
    topic: '',
    desc: ''
  };
  attach_info.value.unshift(newInfo);
  editingIndex.value = 0;
};

// 编辑附加信息
const edit = (index) => {
  editingIndex.value = index;
};

// 取消编辑
const cancel = (index) => {
  // 如果是新增的空记录，则删除
  if (editingIndex.value === 0 && !attach_info.value[0].topic) {
    attach_info.value.splice(0, 1);
  }
  editingIndex.value = -1;
  const formRef = formRefs.value[index];
  if (formRef) {
    formRef.resetFields();
  }
};

// 保存附加信息
const save = async (index) => {
  const formRef = formRefs.value[index];
  if (!formRef) {
    ElMessage.error('表单引用未找到');
    return;
  }

  await formRef.validate();
  emit('save', {
    type: 'attach_info',
    data: attach_info.value
  });
  editingIndex.value = -1;
};

// 删除附加信息
const remove = (index) => {
  attach_info.value.splice(index, 1);
  emit('save', {
    type: 'attach_info',
    data: attach_info.value
  });
};

// 显示工具提示
const showTooltip = (index) => {
  isTooltipVisible.value = true;
  tooltipIndex.value = index;
};

// 隐藏工具提示
const hideTooltip = () => {
  isTooltipVisible.value = false;
  tooltipIndex.value = -1;
};
</script>

<style scoped>
@import url("./cmmon.scss");

:deep(.el-input__wrapper) {
  width: 600px !important;
}
</style>